<template>
  <div id="microPageMulti" class="swiper-container" v-loading="dataLoading">
    <div
      :class="{
        background_music_icon:
          microPageData && microPageData.background_music && !audioPlaying,
        background_music_icon_play:
          microPageData && microPageData.background_music && audioPlaying,
      }"
      @click="playOrPauseMusic"
    >
      <i></i>
    </div>
    <div class="swiper-wrapper">
      <template v-if="microPageData !== null">
        <template v-for="(item, index) in microPageData.pages">
          <div
            :key="index"
            class="swiper-slide"
            :style="{
              position: 'relative',
              backgroundImage:
                'url(' +
                baseURL +
                (item.background_img || microPageData.background_img) +
                ')',
            }"
          >
            <template v-for="(module, indexs) in item.items">
              <!--图片-->
              <template v-if="module.type === 1">
                <img
                  :key="index + '_' + indexs"
                  :class="['module-images', 'animated', module.dynamicEffect]"
                  :style="{
                    position: 'absolute',
                    top: module.top + 'px',
                    left: module.left + 'px',
                    width: module.width - 10 + 'px',
                    height: module.height - 10 + 'px',
                    backgroundImage: 'url(' + (baseURL + module.theme) + ')',
                    padding: '5px',
                    animationDuration: module.dynamicDuration + 's',
                    animationDelay: module.dynamicDelay + 's',
                  }"
                  :src="
                    module.src === ''
                      ? baseURL + 'logo/logo3.png'
                      : baseURL + module.src
                  "
                />
              </template>
              <!--文本-->
              <template v-if="module.type === 2">
                <span
                  :key="index + '_' + indexs"
                  :class="['module-text', 'animated', module.dynamicEffect]"
                  :style="{
                    position: 'absolute',
                    top: module.top + 'px',
                    left: module.left + 'px',
                    width: module.width + 'px',
                    height: module.height + 'px',
                    color: module.text_color,
                    fontSize: module.text_size + 'px',
                    backgroundImage: 'url(' + (baseURL + module.theme) + ')',
                    animationDuration: module.dynamicDuration + 's',
                    animationDelay: module.dynamicDelay + 's',
                  }"
                >
                  {{ module.text }}
                </span>
              </template>
              <!--视频-->
              <template v-if="module.type === 3">
                <video
                  :key="index + '_' + indexs"
                  :class="['module-text', 'animated', module.dynamicEffect]"
                  :ref="'video_' + index + '_' + indexs"
                  controls="controls"
                  :style="{
                    position: 'absolute',
                    top: module.top + 'px',
                    left: module.left + 'px',
                    width: module.width + 'px',
                    height: module.height + 'px',
                    animationDuration: module.dynamicDuration + 's',
                    animationDelay: module.dynamicDelay + 's',
                  }"
                  :src="
                    module.src === ''
                      ? baseURL + 'logo/logo3.png'
                      : baseURL + module.src
                  "
                >
                  您的浏览器不支持 video 标签。
                </video>
              </template>
              <!--电话-->
              <template v-if="module.type === 4">
                <a
                  :key="index + '_' + indexs"
                  :href="'tel:' + module.text"
                  :class="[
                    'module-text',
                    'animated',
                    module.dynamicEffect,
                    'phone-theme ' + module.theme,
                  ]"
                  :style="{
                    padding: '0px',
                    position: 'absolute',
                    top: module.top + 'px',
                    left: module.left + 'px',
                    width: module.width + 'px',
                    height: module.height + 'px',
                    animationDuration: module.dynamicDuration + 's',
                    animationDelay: module.dynamicDelay + 's',
                  }"
                >
                  <div
                    class="left-side"
                    :style="{
                      background:
                        '#52cadb url(' +
                        baseURL +
                        'microPageModulesResources/images/multiPage/phone/' +
                        module.theme +
                        '-l.png' +
                        ') no-repeat',
                    }"
                  >
                    <i class="el-icon-phone"></i>
                  </div>
                  <div
                    class="right-side"
                    :style="{
                      background:
                        '#52cadb url(' +
                        baseURL +
                        'microPageModulesResources/images/multiPage/phone/' +
                        module.theme +
                        '-r.png' +
                        ') no-repeat',
                      'margin-left': '-1px',
                    }"
                  >
                    <div>{{ module.name }}</div>
                    <div>{{ module.text }}</div>
                  </div>
                </a>
              </template>
              <!--链接-->
              <template v-if="module.type === 5">
                <a
                  :key="index + '_' + indexs"
                  :href="module.text"
                  target="_blank"
                  :class="[
                    'module-text',
                    'animated',
                    module.dynamicEffect,
                    'link-theme ' + module.theme,
                  ]"
                  :style="{
                    padding: '0px',
                    position: 'absolute',
                    top: module.top + 'px',
                    left: module.left + 'px',
                    width: module.width + 'px',
                    height: module.height + 'px',
                    animationDuration: module.dynamicDuration + 's',
                    animationDelay: module.dynamicDelay + 's',
                  }"
                >
                  <div
                    class="left-side"
                    :style="{
                      background:
                        '#52cadb url(' +
                        baseURL +
                        'microPageModulesResources/images/multiPage/link/' +
                        module.theme +
                        '-l.png' +
                        ') no-repeat',
                    }"
                  >
                    <i class="el-icon-link"></i>
                  </div>
                  <div
                    class="right-side"
                    :style="{
                      background:
                        '#52cadb url(' +
                        baseURL +
                        'microPageModulesResources/images/multiPage/link/' +
                        module.theme +
                        '-r.png' +
                        ') no-repeat',
                      'margin-left': '-1px',
                    }"
                  >
                    <div>{{ module.name }}</div>
                  </div>
                </a>
              </template>
              <!--地图-->
              <template v-if="module.type === 6">
                <a
                  :key="index + '_' + indexs"
                  :href="module.text"
                  target="_blank"
                  :class="[
                    'module-text',
                    'animated',
                    module.dynamicEffect,
                    'link-theme ' + module.theme,
                  ]"
                  :style="{
                    padding: '0px',
                    position: 'absolute',
                    top: module.top + 'px',
                    left: module.left + 'px',
                    width: module.width + 'px',
                    height: module.height + 'px',
                    animationDuration: module.dynamicDuration + 's',
                    animationDelay: module.dynamicDelay + 's',
                  }"
                >
                  <baidu-map
                    :class="'map-theme ' + module.theme"
                    :style="{
                      width: module.width + 'px',
                      height: module.height + 'px',
                    }"
                    :point="[module.lng, module.lat]"
                  ></baidu-map>
                </a>
              </template>
            </template>
          </div>
        </template>
      </template>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <!--<div class="swiper-button-prev"></div>-->
    <!--<div class="swiper-button-next"></div>-->
    <img class="mircropage-arrow" src="@/assets/images/mircropage_arrow.png" />
    <!--背景音乐-->
    <audio
      v-if="microPageData && microPageData.background_music"
      ref="audio"
      :loop="microPageData.loop"
      :autoplay="microPageData.autoPlay"
      :src="baseURL + microPageData.background_music"
    ></audio>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.css";
import baiduMap from "@/components/baiduMap";
export default {
  name: "microPageCreate",
  components: { baiduMap },
  computed: {},
  data() {
    return {
      baseURL: "/",
      dataLoading: false,
      microPageId: this.$route.query.id,
      microPageData: null,
      lastIndex: 0, // 上次滑动的页码
      swiperObj: null, // swiper对象
      audioInstance: null, // 背景音乐对象
      audioPlaying: false, // 背景音乐播放中
    };
  },
  created() {},
  mounted() {
    this.e() && this.i();

    this.getData(); // 获取微单页数据

    this.swiperObj = new Swiper(".swiper-container", {
      loop: true,
      autoplay: false, // 可选选项，自动滑动
      direction: "vertical", // Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
      pagination: {
        el: ".swiper-pagination", // 分页器
      },
      navigation: {
        // nextEl: '.swiper-button-next', // 前进按钮
        // prevEl: '.swiper-button-prev' // 后退按钮
      },
      on: {
        // 切换开始前
        slideChangeTransitionStart: () => {
          let index = this.lastIndex;
          this.lastIndex = this.swiperObj.activeIndex; // 切换开始时，现在是第几个slide
          let TEMPArr = JSON.parse(
            JSON.stringify(this.microPageData.pages[index])
          );
          for (
            let i = 0;
            i < this.microPageData.pages[index].items.length;
            i++
          ) {
            // 切换开始前，视频先暂停
            if (this.microPageData.pages[index].items[i].type === 3) {
              this.$refs["video_" + index + "_" + i][0].pause();
            }
          }
        },
        // 切换结束后
        slideChangeTransitionEnd: () => {
          let index = this.swiperObj.activeIndex; // 切换结束时，现在是第几个slide
          let TEMPArr = JSON.parse(
            JSON.stringify(this.microPageData.pages[index])
          );
          for (
            let i = 0;
            i < this.microPageData.pages[index].items.length;
            i++
          ) {
            this.microPageData.pages[index].items[i].dynamicEffect = "";
            setTimeout(() => {
              this.microPageData.pages[index].items[i].dynamicEffect =
                TEMPArr.items[i].dynamicEffect;
            }, 10);
          }
        },
      },
    });
  },
  methods: {
    /**
     * 获取资源列表
     */
    async getData() {
      console.log("1231231");
      try {
        // TODO 从接口获取
        let arr = localStorage.getItem("myPage");
        if (arr !== null) {
          try {
            let tempArr = JSON.parse(arr);
            if (Array.isArray(tempArr)) {
              let tempObj = tempArr.find((t) => t.id === this.microPageId);
              if (tempObj !== undefined && tempObj.hasOwnProperty("content")) {
                this.microPageData = tempObj.content;
              } else {
                console.error("获取网页数据错误~");
              }
            }
          } catch (error) {
            console.error("获取网页数据错误~");
          }
        }
        this.$nextTick(() => {
          setTimeout(() => {
            let phoneScale = parseInt(window.screen.width) / 320;
            document
              .querySelector("meta[name=viewport]")
              .setAttribute(
                "content",
                "width=320, initial-scale = " +
                  phoneScale +
                  ", maximum-scale = " +
                  phoneScale +
                  ", maximum-scale = " +
                  phoneScale +
                  ", target-densitydpi=device-dpi"
              );
          }, 50);
        });
        setTimeout(() => {
          this.swiperObj.update(); // 更新swiper

          // 监听视频的播放事件
          try {
            this.$nextTick(() => {
              for (
                let index = 0;
                index < this.microPageData.pages.length;
                index++
              ) {
                for (
                  let i = 0;
                  i < this.microPageData.pages[index].items.length;
                  i++
                ) {
                  // 播放视频时把背景音乐暂停
                  if (this.microPageData.pages[index].items[i].type === 3) {
                    // 监听所有视频的播放事件
                    this.$refs["video_" + index + "_" + i][0].addEventListener(
                      "play",
                      () => {
                        if (this.audioInstance && !this.audioInstance.paused) {
                          this.audioInstance.pause();
                          this.audioPlaying = false;
                        }
                      }
                    );
                  }
                }
              }
            });
          } catch (err) {
            console.warn(err);
          }
        }, 100);
      } catch (e) {
        console.log("JSON转换出错");
      }
    },
    e() {
      return (
        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i.test(
          navigator.userAgent
        ) || window.innerWidth < 500
      );
    },
    i() {
      let e = 1;
      let i = document.documentElement.clientWidth || 320;
      let n = document.documentElement.clientHeight || 486;
      e = i / n >= 320 / 486 ? n / 486 : i / 320;
      let o =
        "width=320, initial-scale=" +
        e +
        ", maximum-scale=" +
        e +
        ", user-scalable=no";
      document.getElementById("viewport").setAttribute("content", o);
    },
    /**
     * 播放或暂停背景音乐
     **/
    playOrPauseMusic() {
      // 判断背景音乐
      if (this.microPageData && this.microPageData.background_music) {
        if (this.audioInstance === null) {
          this.audioInstance = this.$refs.audio;
        }
        if (this.audioInstance.paused) {
          this.audioInstance.play();
          this.audioPlaying = true;
        } else {
          this.audioInstance.pause();
          this.audioPlaying = false;
        }
      }
    },
  },
  destroyed() {},
};
</script>

<style lang='scss' scoped>
@import "@/assets/css/style.scss";
@import "@/assets/css/phoneTheme.scss";
@import "@/assets/css/linkTheme.scss";

#microPageMulti {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  .background_music_icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    right: 0;
    z-index: 999;
    cursor: pointer;
    i {
      display: block;
      margin-top: 9px;
      margin-left: 9px;
      width: 28px;
      height: 28px;
      background: url(../../assets/images/audio.png) no-repeat right 0;
    }
  }
  .background_music_icon_play {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    right: 0;
    z-index: 999;
    cursor: pointer;
    i {
      display: block;
      margin-top: 9px;
      margin-left: 9px;
      width: 28px;
      height: 28px;
      background: url(../../assets/images/audio.png) no-repeat left 0;
      -webkit-transform: rotate(360deg);
      animation: rotation 3s linear infinite;
      -moz-animation: rotation 3s linear infinite;
      -webkit-animation: rotation 3s linear infinite;
      -o-animation: rotation 3s linear infinite;
    }
  }
  @-webkit-keyframes rotation {
    from {
      -webkit-transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
    }
  }
  @-moz-keyframes rotation {
    from {
      -moz-transform: rotate(0deg);
    }
    to {
      -moz-transform: rotate(360deg);
    }
  }
  @-o-keyframes rotation {
    from {
      o: rotate(0deg);
    }
    to {
      o: rotate(360deg);
    }
  }
  @keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .mircropage-arrow {
    position: absolute;
    left: 50%;
    bottom: 20px;
    z-index: 9;
    width: 20px;
    transform: translateX(-50%);
    -webkit-animation: start 1.5s infinite ease-in-out;
  }
  @-webkit-keyframes start {
    0%,
    30% {
      opacity: 0;
      -webkit-transform: translate(0, 10px);
    }
    60% {
      opacity: 1;
      -webkit-transform: translate(0, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: translate(0, -8px);
    }
  }
  @-moz-keyframes start {
    0%,
    30% {
      opacity: 0;
      -moz-transform: translate(0, 10px);
    }
    60% {
      opacity: 1;
      -moz-transform: translate(0, 0);
    }
    100% {
      opacity: 0;
      -moz-transform: translate(0, -8px);
    }
  }
  @keyframes start {
    0%,
    30% {
      opacity: 0;
      transform: translate(0, 10px);
    }
    60% {
      opacity: 1;
      transform: translate(0, 0);
    }
    100% {
      opacity: 0;
      transform: translate(0, -8px);
    }
  }
}
.swiper-wrapper {
  width: 100%;
  height: 100%;
  ::v-deep .swiper-slide {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .module-images {
      background-repeat: no-repeat;
      background-size: 100% 100%;
      overflow: hidden;
    }
    .module-text {
      background-repeat: no-repeat;
      background-size: 100% 100%;
      overflow: hidden;
      padding: 2px 5px;
    }
  }
}
.swiper-pagination {
  width: 10px;
  right: 10px;
  @include ct;
  ::v-deep .swiper-pagination-bullet {
    background: #fff;
  }
}
</style>

<style lang="scss" scoped>
/**针对设置了减弱效果的CSS设置 start*/
@media screen and (prefers-reduced-motion: reduce) {
  .animated {
    animation: unset !important;
    transition: none !important;
  }

  .bounceInDown {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
  }

  .bounceOutUp {
    display: none;
  }

  .pop_ad_background_hide {
    display: none;
  }
}

@media screen and (prefers-reduced-motion) {
  .animated {
    animation: unset !important;
    transition: none !important;
  }

  .bounceInDown {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
  }

  .bounceOutUp {
    display: none;
  }

  .pop_ad_background_hide {
    display: none;
  }
}
</style>

